<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
  <title>房屋管理</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    :root {
      --primary-color: #4CAF50;
      --card-shadow: 0 4px 8px rgba(0,0,0,0.05);
      --hover-color: rgba(76, 175, 80, 0.1);
    }

    body {
      background-color: #f5f7fa;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .sidebar {
      background-color: white;
      height: 100vh;
      box-shadow: 2px 0 10px rgba(0,0,0,0.05);
      position: fixed;
      z-index: 100;
      width: 250px;
    }

    .sidebar .nav-link {
      color: #495057;
      border-radius: 5px;
      margin-bottom: 5px;
      padding: 10px 15px;
    }

    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: var(--hover-color);
      color: var(--primary-color);
    }

    .sidebar .nav-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
    }

    .main-content {
      margin-left: 250px;
      padding: 30px;
      min-height: 100vh;
    }

    .page-header {
      background-color: white;
      padding: 20px 25px;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      margin-bottom: 25px;
    }

    .management-container {
      background: white;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      padding: 25px;
    }

    .table-custom th {
      background-color: var(--primary-color);
      color: white;
      font-weight: 600;
    }

    .btn-action {
      background-color: var(--primary-color);
      color: white;
      border-radius: 5px;
      padding: 6px 12px;
      text-decoration: none;
      border: none;
      transition: background-color 0.3s;
    }

    .btn-action:hover {
      background-color: #3d8b40;
      color: white;
    }

    .status-badge {
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 0.85rem;
    }

    .status-available {
      background-color: rgba(33, 150, 243, 0.15);
      color: #2196F3;
    }

    .status-sold {
      background-color: rgba(244, 67, 54, 0.15);
      color: #f44336;
    }

    .house-image {
      width: 100px;
      height: 60px;
      object-fit: cover;
      border-radius: 5px;
      background-color: #f8f9fa;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6c757d;
      overflow: hidden;
    }

    .notification-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background-color: #dc3545;
      color: white;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .admin-info {
      padding: 30px 20px 20px;
      text-align: center;
      border-bottom: 1px solid #e9ecef;
    }

    .admin-avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      background-color: #e9f5eb;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
      color: var(--primary-color);
      font-size: 2.5rem;
    }

    .admin-name {
      font-weight: 600;
      margin-bottom: 5px;
      font-size: 1.2rem;
    }

    .admin-role {
      color: #6c757d;
      font-size: 0.95rem;
      background-color: #e9f5eb;
      padding: 3px 10px;
      border-radius: 15px;
      display: inline-block;
      margin-top: 10px;
    }

    .modal-header {
      background-color: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
      padding: 15px 20px;
    }

    .modal-title {
      color: var(--primary-color);
      font-weight: 600;
    }

    .price-display {
      font-weight: 600;
      color: #4CAF50;
    }
  </style>
</head>
<body>
<div class="sidebar">
  <div class="admin-info">
    <div class="admin-avatar">
      <i class="bi bi-person-badge"></i>
    </div>
    <div class="admin-name">${user.username}</div>
    <div class="admin-role">系统管理员</div>
  </div>

  <nav class="nav flex-column mt-4 px-2">
    <a class="nav-link" href="../adminHome.jsp">
      <i class="bi bi-speedometer2"></i> 控制面板
    </a>
    <a class="nav-link" href="members">
      <i class="bi bi-people"></i> 会员管理
    </a>
    <a class="nav-link active" href="houses">
      <i class="bi bi-house-door"></i> 房屋管理
    </a>
    <a class="nav-link" href="venues">
      <i class="bi bi-building"></i> 场馆管理
    </a>
    <a class="nav-link" href="users">
      <i class="bi bi-person-gear"></i> 用户管理
    </a>
    <a class="nav-link" href="profile">
      <i class="bi bi-person-circle"></i> 个人设置
    </a>
    <a class="nav-link" href="logout" style="margin-top: 20px;">
      <i class="bi bi-box-arrow-right"></i> 退出系统
    </a>
  </nav>
</div>

<div class="main-content">
  <div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h2>社区房屋管理</h2>
        <p class="text-muted mb-0">管理社区房屋信息，共计 ${houses.size()} 套房屋</p>
      </div>
      <div class="d-flex">
        <div class="position-relative me-3">
          <a href="#" class="btn btn-outline-secondary position-relative">
            <i class="bi bi-bell"></i>

          </a>
        </div>
        <div class="dropdown">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
            <i class="bi bi-gear"></i>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="profile">个人设置</a></li>
            <li><a class="dropdown-item" href="#">系统设置</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="logout">退出系统</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="management-container">
    <!-- 操作区域 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
        <button class="btn btn-action" onclick="openAddModal()">
          <i class="bi bi-plus-circle me-2"></i>添加房屋
        </button>
      </div>
<%--      <div class="d-flex">
        <div class="input-group" style="max-width: 300px;">
          <button class="btn btn-outline-success" type="button"><i class="bi bi-search"></i></button>
        </div>
      </div>--%>
    </div>

    <!-- 消息通知 -->
    <% if (request.getAttribute("success") != null) { %>
    <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
      <i class="bi bi-check-circle me-2"></i> <%= request.getAttribute("success") %>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <% } %>
    <% if (request.getAttribute("error") != null) { %>
    <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
      <i class="bi bi-exclamation-circle me-2"></i> <%= request.getAttribute("error") %>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <% } %>

    <!-- 房屋列表表格 -->
    <div class="table-responsive">
      <table class="table table-custom table-hover align-middle">
        <thead>
        <tr>
          <th>房屋ID</th>
          <th>楼盘名称</th>
          <th>位置</th>
          <th>房号</th>
          <th>面积(㎡)</th>
          <th>价格</th>
          <th>房屋图片</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="house" items="${houses}">
          <tr>
            <td>${house.houseId}</td>
            <td>${house.houseName}</td>
            <td>${house.buildingNumber}栋 ${house.unitNumber}单元</td>
            <td>${house.roomNumber}</td>
            <td>${house.area}</td>
            <td class="price-display">¥${house.price}</td>
            <td>
              <div class="house-image">
                <c:if test="${not empty house.houseImage}">
                  <img src="${pageContext.request.contextPath}/down?filename=${house.houseImage}" alt="房屋图片" class="img-fluid">
                </c:if>
                <c:if test="${empty house.houseImage}">
                  <i class="bi bi-image text-muted"></i>
                </c:if>
              </div>
            </td>
            <td>
                <span class="status-badge ${house.status == 0 ? 'status-available' : 'status-sold'}">
                    ${house.status == 0 ? '可售' : '已售'}
                </span>
            </td>
            <td>
              <button class="btn btn-sm btn-outline-primary"
                      onclick="openEditModal(${house.houseId}, ${house.status}, ${house.buyerId}, ${house.price})">
                <i class="bi bi-pencil-square me-1"></i>更新状态
              </button>
            </td>
          </tr>
        </c:forEach>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- 添加房屋模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-house-add me-2"></i>添加房屋</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addHouseForm" action="addHouse" method="post" enctype="multipart/form-data">
        <div class="modal-body">
          <input type="hidden" name="action" value="add">

          <div class="row mb-3">
            <div class="col-md-6">
              <label for="houseName" class="form-label">楼盘名称</label>
              <input type="text" class="form-control" id="houseName" name="houseName" required maxlength="100">
            </div>
            <div class="col-md-6">
              <label for="roomNumber" class="form-label">房间号</label>
              <input type="text" class="form-control" id="roomNumber" name="roomNumber" required maxlength="20">
            </div>
          </div>

          <div class="row mb-3">
            <div class="col-md-6">
              <label for="buildingNumber" class="form-label">楼栋号</label>
              <input type="text" class="form-control" id="buildingNumber" name="buildingNumber" required maxlength="20">
            </div>
            <div class="col-md-6">
              <label for="unitNumber" class="form-label">单元号</label>
              <input type="text" class="form-control" id="unitNumber" name="unitNumber" required maxlength="20">
            </div>
          </div>

          <div class="row mb-3">
            <div class="col-md-6">
              <label for="area" class="form-label">面积(㎡)</label>
              <input type="number" class="form-control" id="area" name="area" required step="0.01" min="0">
            </div>
            <div class="col-md-6">
              <label for="price" class="form-label">价格(元)</label>
              <input type="number" class="form-control" id="price" name="price" required step="0.01" min="0">
            </div>
          </div>

          <div class="mb-3">
            <label for="house_image" class="form-label">房屋图片</label>
            <input type="file" class="form-control" id="house_image" name="house_image" accept="image/*">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-success">保存房屋信息</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 更新房屋状态模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-pencil-square me-2"></i>更新房屋状态</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editForm" action="updateHouse" method="post">
        <div class="modal-body">
          <input type="hidden" id="editHouseId" name="houseId">

          <div class="row mb-4">
            <div class="col-md-6">
              <div class="card h-100">
                <div class="card-body text-center">
                  <div class="price-display fs-4" id="currentPriceDisplay"></div>
                  <div class="text-muted small">当前价格</div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card h-100">
                <div class="card-body text-center">
                  <div class="fs-6 text-primary" id="currentStatusDisplay"></div>
                  <div class="text-muted small">当前状态</div>
                </div>
              </div>
            </div>
          </div>

          <div class="mb-3">
            <label for="editPrice" class="form-label">更新价格(元)</label>
            <input type="number" class="form-control" id="editPrice" name="price" required step="0.01" min="0">
          </div>

          <div class="mb-3">
            <label for="editStatus" class="form-label">更新状态</label>
            <select class="form-select" id="editStatus" name="status" onchange="toggleBuyerField()" required>
              <option value="0">可售</option>
              <option value="1">已售</option>
            </select>
          </div>

          <div class="mb-3" id="buyerGroup" style="display: none;">
            <label for="editBuyerId" class="form-label">购买会员ID</label>
            <input type="number" class="form-control" id="editBuyerId" name="buyerId">
            <div class="form-text">请输入购买此房屋的会员ID</div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">更新状态</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 添加房屋模态框
  function openAddModal() {
    const addModal = new bootstrap.Modal(document.getElementById('addModal'));
    addModal.show();
  }

  // 更新房屋状态模态框
  function openEditModal(houseId, status, buyerId, price) {
    // 设置表单值
    document.getElementById('editHouseId').value = houseId;
    document.getElementById('editStatus').value = status;
    document.getElementById('editPrice').value = price;

    // 设置当前状态显示
    document.getElementById('currentPriceDisplay').textContent = '¥' + price;
    document.getElementById('currentStatusDisplay').textContent = status == 0 ? '可售' : '已售';

    // 设置状态图标和颜色
    const statusDisplay = document.getElementById('currentStatusDisplay');
    statusDisplay.className = status == 0 ? 'fs-6 text-primary' : 'fs-6 text-danger';

    // 处理买家ID字段
    const buyerGroup = document.getElementById('buyerGroup');
    if (status == 1) {
      document.getElementById('editBuyerId').value = buyerId || '';
      buyerGroup.style.display = 'block';
    } else {
      buyerGroup.style.display = 'none';
    }

    const editModal = new bootstrap.Modal(document.getElementById('editModal'));
    editModal.show();
  }

  // 切换买家ID显示
  function toggleBuyerField() {
    const status = document.getElementById("editStatus").value;
    const buyerGroup = document.getElementById("buyerGroup");
    const buyerIdInput = document.getElementById("editBuyerId");

    if (status === "1") { // 已售状态
      buyerGroup.style.display = "block";
      buyerIdInput.setAttribute("required", "required");
    } else { // 可售状态
      buyerGroup.style.display = "none";
      buyerIdInput.removeAttribute("required");
    }
  }

  // 设置当前页面的活动菜单项
  document.addEventListener('DOMContentLoaded', function() {
    // 设置房屋管理菜单为激活状态
    const housesLink = document.querySelector('.nav-link[href="admin/houses"]');
    if (housesLink) {
      document.querySelectorAll('.nav-link').forEach(link => {
        link.classList.remove('active');
      });
      housesLink.classList.add('active');
    }
  });
</script>
</body>
</html>